<template>
  <div style="z-index: -999">
    <el-image :src="red[0]" alt="" style="width: 145px;position: absolute;left: 20%;margin-top: 25px"/>
    <el-image :src="red[1]" alt="" style="width: 300px;position: absolute;margin-left: 5%;"/>
    <el-image :src="red[2]" alt="" style="width: 200px;position: absolute;margin-top: 7%;margin-left: 5%"/>
  </div>

  <div>
    <el-image :src="blue[0]" alt="" style="width: 145px;position: absolute;left: 85%;margin-top: 25%" />
    <el-image :src="blue[1]" alt="" style="width: 300px;position: absolute;margin-left: 65%;margin-top: 27%" />
    <el-image :src="blue[2]" alt="" style="width: 350px;position: absolute;margin-top: 18%;margin-left: 65%" />
  </div>

  <div>

    <el-image :src="Y[0]" alt="" style="width: 300px;position: absolute;margin-top: 29%;margin-left: 10%;z-index: 10" />
    <el-image :src="Y[1]" alt="" style="width: 250px;position: absolute;margin-left: 19%;margin-top: 29%;z-index: 11" />
    <el-image :src="Y[2]" alt="" style="width: 200px;position: absolute;margin-top: 31%;margin-left: 5%" />
  </div>

  <div>
    <el-image :src="green[0]" alt="" style="width: 200px;position: absolute;left: 73%;margin-top: 6%;z-index: 11" />
    <el-image :src="green[1]" alt="" style="width: 150px;position: absolute;margin-left: 80%;margin-top: 1%" />
    <el-image :src="green[2]" alt="" style="width: 300px;position: absolute;left: 70%;margin-top: 2%;z-index: 10" />
  </div>


  <div class="HomeMain">
    <Typeit style="margin-top: 10%"/>

    <div style="width: max-content;margin-left: 32%;margin-top: 1%">
      <span style="font-size: 24px">
        Liner学习神器，集AI创作、笔记制作，模型下载<br>
        &nbsp;&nbsp;多种编程学习工具于一体，激发能力无限延伸。
      </span>
    </div>
    <el-button type="primary" color="#8454C2" style="margin-left: 43%;margin-top: 3%;width: 15%;height: 8%;border-radius: 15px;font-size: 24px">点击使用</el-button>
  </div>

  <!-- 功能介绍 -->
  <HomeIntroduce style="margin-top: -12%;overflow: hidden"/>

  <!-- 适用人群 -->
  <applicable-people style="margin-top: 5%"/>
</template>

<script setup>
import Typeit from '@/components/Home/new/Typeit.vue'
import red1 from '@/assets/img/Home/Ellipse 10.png'
import red2 from '@/assets/img/Home/Rectangle 30.png'
import red3 from '@/assets/img/Home/The Little Things Stationery.png'
import blue1 from '@/assets/img/Home/Rectangle 32.png'
import blue2 from '@/assets/img/Home/Rectangle 33.png'
import blue3 from '@/assets/img/Home/The Little Things Working.png'
import green1 from '@/assets/img/Home/shuju.png'
import green2 from '@/assets/img/Home/Ellipse 11.png'
import green3 from '@/assets/img/Home/Rectangle 31.png'
import Y1 from '@/assets/img/Home/Rectangle 36.png'
import Y2 from '@/assets/img/Home/The Little Things Analytics.png'
import Y3 from '@/assets/img/Home/Group 1.png'
import HomeIntroduce from "@/components/Home/new/HomeIntroduce.vue";
import ApplicablePeople from "@/components/Home/new/applicablePeople.vue";
// 图片分组引入
const red = [red1,red2,red3]
const blue = [blue1,blue2,blue3]
const green = [green1,green2,green3]
const Y = [Y1,Y2,Y3]
</script>

<style>
.HomeMain{
  width: 100%;
  height: 800px;
  position: relative;
  z-index: 999;
}
</style>
